<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
// vue 属性定义 函数
// table的colimns配置
const columns = [
	{
		key: '试卷ID',
		title: '试卷ID',
		dataIndex: 'id',
		width: '100px'
	},
	{
		key: 'paperName',
		title: '试卷',
		dataIndex: 'name'
	},
	{
		title: '操作',
		key: 'action'
	}
]

// 接收父组件传来的值
defineProps({
	visible: { type: Boolean, default: true },
	paperList: { type: Array, default: [] }
})
// 接收父组件传来的方法
const emit = defineEmits(['on-change', 'on-bind'])

// 关闭弹窗
const handleCancel = () => {
	emit('on-change', false)
}
// bind试卷将数据传给父组件
const bindPaper = (record: any) => {
	console.log(record)
	emit('on-bind', record, false)
}
</script>

<template>
	<div>
		<a-modal
			title="绑定试卷"
			v-model:visible="visible"
			@cancel="handleCancel"
			ok-text="确认"
			cancel-text="取消"
			width="900px"
			:footer="null"
		>
			<a-input-search
				placeholder="请输入试卷名称"
				enter-button="搜索"
				size="large"
				:style="{ width: '400px', marginBottom: '30px' }"
			/>
			<a-table
				:data-source="paperList"
				:columns="columns"
				:scroll="{ y: 300 }"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'action'">
						<a-button @click="bindPaper(record)">绑定</a-button>
					</template>
				</template>
			</a-table>
		</a-modal>
	</div>
</template>

<style lang="less"></style>
